在前面的文章中，我一直沒有談到一件很重要的事。

如何營利？
是的，就算30天煉成會是一個很棒的遊戲，目前預期會開發試玩版的下載。
但也從來沒有說過，我是在做公益啊~

其實我在一開始時就有提過，會希望能加入廣告及APP內購買。
依目前的進度來看，廣告的加入會是主要的收入來源。

在APP內加入廣告

在Fluter加入廣告分成以下幾個步驟，熟悉後其實會覺得相當容易。

1. 申請一個AdMob的帳號。
   如果你想要獲得收入，那就要先去申請一個自己的帳號。如果只是想要練習程式的撰寫，那可以先用測試用的廣告id。
   在建立廣告元件時，會需要設置廣告id，提供申請投放廣告及廣告的類型。
   因為這有牽涉的金錢與帳號是否被禁止，一般在開發時，也都是會先用測試用的廣告id來測試，直到上架才會更換成自己的。

• 測試用的廣告id

Android 適用測試 ID

AdMob Id
ca-app-pub-3940256099942544~3347511713
橫幅廣告
ca-app-pub-3940256099942544/6300978111
插頁式廣告
ca-app-pub-3940256099942544/1033173712
獎勵式廣告
ca-app-pub-3940256099942544/5224354917

iOS 適用測試 ID

AdMob Id
ca-app-pub-3940256099942544~1458002511
橫幅廣告
ca-app-pub-3940256099942544/2934735716
插頁式廣告
ca-app-pub-3940256099942544/4411468910
獎勵式廣告
ca-app-pub-3940256099942544/1712485313

• 自己的怎麼申請
  在你的AdMob主控台中新增應用程式 -> 新增元件 -> 選你想要的元件(都有圖文說明) -> 複製產生的id
  

2. 將套件引入專案及設置權限。

在pubspec.yaml中

dependencies:
  google_mobile_ads: ^3.1.0

若是Android程式，在AndroidManifest.xml中

<manifest>
///android 12 以後的新規定，在play console政策要申明是「有廣告的app」，在Manifest要加這句
<uses-permission android:name="com.google.android.gms.permission.AD_ID"/>
    ...
    <application>
       ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>

</manifest>

若是iOS的程式，要在info.plist中加入：

...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...

3. 依你想要的廣告類型初始化廣告元件及id，並編寫行為
   要寫程式的只有最後這一步，簡單來說，第一步是在main.dart中初始化套件

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  ...
  MobileAds.instance.initialize();
  ...
  runApp(MyApp());
}

然後在你要顯示廣告的那一頁的initState()確定載入你要的廣告成功。例如：

@override
void initState() {
  ...
///載入一個廣幅廣告
  BannerAd(
    adUnitId: '廣告id',
    request: AdRequest(),
    size: AdSize.banner,
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, err) {
        print('失敗啦!~');
        ad.dispose();
      },
    ),
  ).load();
  
  ///載入一個插頁廣告
  InterstitialAd.load(
      adUnitId: '廣告id',
      request: const AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (ad) {
        ///全螢幕的插頁廣告
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (ad) {
              看完廣告按離開時做什麼事
            },
          );

          setState(() {
            _interstitialAd = ad;
          });
        },
        onAdFailedToLoad: (err) {
          debugPrint('失敗啦!~');
        },
      ),
    );
  
}

接著就是在畫面中展示你的廣告，例如我們剛剛初始化好的橫幅廣告元件_bannerAd，我們直接在想要的位置放個Container來裝他就行了~

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: SafeArea(
      child: Stack(
        children: [
            ...
            ///確認有載入成功
          if (_bannerAd != null)
            Align(
              alignment: Alignment.center,
              child: Container(
              ///自動適應大小
                width: _bannerAd!.size.width.toDouble(),
                height: _bannerAd!.size.height.toDouble(),
                child: AdWidget(ad: _bannerAd!),
              ),
            ),
        ],
      ),
    ),
    ...
  );
}

Flutter在像這種常用的套件上，都整合的滿好用的，不需要額外做太多的環境設置。
可以在畫面、行為(怎麼展示廣告、按下後會有什麼及使用者會怎麼預期)的設計上，下更多的巧思。
來讓程式能有更佳的使用者體驗。

可能也會有更多收益~

參考
向 Flutter 应用添加 AdMob 广告(codelab)
Mobile Ads SDK (Flutter)官方文件